<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript笔记</title>
    <!--
    <script src="outer.js" language="javascript"></script>		第一种  直接响应

	<script type="text/javascript">   					    	第二种  直接响应
    	alert('直接响应');
    </script>  

	<a href="javascript:alert("输入要显示的内容");">点击后响应</a>	第三种  点击响应
    第一种和第二种表达效果一样。其中，type="text/javascript"与language=“javascript”可以互换，现在基本都支持所以已经不必写了。alert(单引号)或alert(双引号)都可以。注意：script标签是可以同时在head标签或body标签内使用-->
</head>
<body>
<!--
	<script src="outer.js"></script>
--> 
	<h2 id="demo"></h2>
    
    <button onclick="F()">总按钮F</button>

	<p id="change">JavaScript能改变HTML元素的内容。
    	<button onclick="F0()">改变一下F0</button>
    </p>
    
    <button onclick="F1()">显示时间F1</button>

    <p id="answer">假设 y=5，计算 x=y+2，并显示结果。
    	<span ><button onclick="F2()">显示答案F2</button></span>
	</p>
    
    <button onClick="F3('我','大帅哥')">点击这里F3</button>
    <br /><br />
	<button onclick="button1()">时间按钮1</button>
    <button onClick="getElementById('demo').innerHTML=Date();">时间按钮1.1</button>	<!--这里的onclick=""里边就没有document.了-->
    <button onClick="button2()">时间按钮2</button>
    <button onClick="button3()">时间按钮3</button>
    <br /><br />
    输入年龄：<input id="age" />
    <button onClick="F4()">投票F4</button>
    <br /><br />
    <button onClick="F5()" />测试错误F5</button>
    <input type="button" onClick="F5()" value="测试错误F5" />		<!--两种按钮的写法都可以-->
    <p>请输出一个 5 到 10 之间的数字:</p>
    <input id="i1" type="text" /><button onClick="F6()">测试输入F6</button>
    <br /><br />
    <form id="myform" target="_blank" action="http://www.baidu.com" onSubmit="return F7()" method="get">
    <font color="#FF0000">*</font>姓：<input type="text" id="fname" />
    <input type="submit" value="提交F7" />(1、<font color="#FF0000">*</font>表示必填项目，当值为空时将弹出对话框	2、Email)
    </form>
    <p id="p8">学号数理化，走遍天下都不怕AAAAAAAAAA！</p>
    搜索字符串<b>“不怕”</b>，并显示匹配的起始位置：
    <input type="button" value="搜索F8" onClick="F8()" />
    <input type="button" value="替换F9" onClick="F9()" />
<script>
	//document.write('<h1>单引号双引号都可以（只能在 HTML 输出流中使用）</h1>');
	
    /*function F0()	{	//此行结尾处不能有分号
	  document.getElementById('change').innerHTML="我爱你！";
	}
    
	/*function F1()		//此行结尾处不能有分号
	{
    //document.write(Date());  在页面上呈现时间并清空之前网页内容
	//alert(Date());		弹出对话框呈现时间
	}
	
	/*var x=123;																					//String（）或toString()方法转换为字符串
	var a="456";	
	var b=+a;		//一元运算符: + 可用于将变量转换为数字
	document.getElementById("demo").innerHTML=
		String(x) +"<br>" +				//数字
		String(123) +"<br>" +
		String(100+23) +"<br>" +
		x.toString() +"<br>" +
		(123).toString() +"<br>" +
		(100+23).toString() +"<br>" +
		String(Date()) +"<br>" +		//日期
		Date().toString() +"<br>" +	
		
		Number("3.14") +"<br>" +																//number()方法转换为数字
		Number(" ") +"<br>" +	        // 返回 0 
		Number("") +"<br>" +	        // 返回 0
		Number("99 88") +"<br>" +		// 返回 NaN(不是数字)
		Number(true) +"<br>" +			//返回1
		Number(false) +"<br>" +			//返回0
		Number(new Date()) +"<br>" +
		new Date().getTime() +"<br>" +		//日期转成数字两种方法
		typeof a + "<br>" + 			//返回string
		typeof b;						//返回number
		
	/*document.getElementById("demo").innerHTML=												// typeof   检测变量的数据类型
	typeof "john" + "<br>"+ 		//检测多个时需要写多个typeof,但是只有结尾才有分号
	typeof 3.24 + "<br>"+		//数字没有分号
	typeof NaN + "<br>"+		//NaN的数据类型是number
	typeof function(){} + "<br>"+		//返回function
	typeof false + "<br>"+		//格式_document.getElementById("demo").innerHTML=typeof	内容+内容+... ;
	typeof Date() + "<br>"+			//返回string(正确的Date对象为：new Date())
	typeof new Date() + "<br>"+		//返回object
	typeof [1,2,"BMW"] + "<br>"+		//在JavaScript中，数组是一种特殊的对象类型
	typeof {name:'john',age:'20'} + "<br>"+
	typeof null + "<br>"+		//null类型是对象
	typeof undefined + "<br>"+		//undefined类型是undefined。在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。
	(null == undefined) + "<br>"+
	(null === undefined);
	
	/*var x,y; 
	y=5;
	x=y+2;
	function F2() {
	  document.getElementById("answer").innerHTML="答案：x=" + x;
	}
	
	//document.getElementById('demo').innerHTML=123e5;  123e5加单、双引号就成为字符串;
	
	/*var x=6
	document.getElementById('demo').innerHTML=x;
	
	//document.getElementById('demo').innerHTML=(5+6)*10;
	
	/*var x,y,z;
	x=1+2;
	y=3*x;
	z=(x+y)*4;
	document.write(x+"<br>");
	document.write(y+"<br>");
	document.getElementById('demo').innerHTML=z;
	
	/*var x=16+"baidu";
	document.getElementById('demo').innerHTML=x;
	
	/*function F(){
	text1="百度一下";
	text2="你就知道";
	text3=text1 + " " + text2;		//注意：text1和text2都没有引号
	document.getElementById("demo").innerHTML=text3;
	}
	
	/* var person={firstname:"Jone",lastname:"Smith",id:5566};	// 对象  包含多个变量时：大括号括起来，冒号属性，逗号隔开
	document.write(person.lastname+"<br>");		//两种寻址方式（上述id是数值或字符都可以）
	document.write(person["firstname"]+"<br>");  记得中括号前还有一个的变量名
	
	/*function F3(var1,var2){  	//变量的数值不能体现在函数里，而应是在输出端
		alert(var1 + " am a "+ var2);
		}
		
	/*function F(a,b)
	{
	return a*b	
	}
	document.getElementById("demo").innerHTML=F(5,6);
	
	/*function button1(){	点击按钮1时间将显示在id="demo"的标签内
		document.getElementById('demo').innerHTML=Date();
		}
	function button2(){		点击按钮2时间将弹窗显示
		alert(Date());
		}
	function button3(){		点击按钮3时间将清空之前内容并显示
		document.write(Date());
		} 
		
	/*var txt="HEllo World!";
	document.write("<br>"+ txt.length);  字符串的长度
	
	/*function F4(){																//判断条件符合与否
	var age,judge
	age=document.getElementById("age").value;
	judge=(age<18)
		?
		"<font color=red>年龄太小</font>"
		:
		"<font color=#00FF00>年龄已达到</font>";
	document.getElementById('demo').innerHTML=judge;
	}
	
	/*function F()																	//if条件语句  满足则只执行
	{
	var x="";
	var	time=new Date().getHours();
	if(time<20)
		{
		x="GOOD LUCK!";
		}
	document.getElementById('demo').innerHTML=x;	
	}
	
	/*function F()																	//if...else条件语句	满足则执行，不满足另执行
	{
	var x="";
	var time=new Date().getHours();
	if(time<18)
		{
		x="GOOD!";
		}
	else
		{
		x="NICE!";
		}
	document.getElementById("demo").innerHTML=x;	
	}
	
	/*function F()   															 //if...else if...else条件语句	满足多条件执行的事件
	{
	var x="";
	var time=new Date().getHours();
	if (time<10)
		{
		x="Goood morning";	
		}	
	else if (time>10 && time<16) 	//发现写成10<time<16也能正常执行
		{
		x="Good day";	
		}
	else
		{
		x="Good evening"	
		}
	document.getElementById("demo").innerHTML=x;
	}

	/*function F()																//概率事件  50%的概率可以连接到两个不同的超链接
	{
	var r=Math.random();
	var x=document.getElementById("demo");
	if (r>0.5)		//可以是0-1任意一个数值，无需之和正好为1
		{
		x.innerHTML="<a href='http://www.baidu.com'>百度</a>";	//必须得有双引号
		}
	else
		{
		x.innerHTML="<a href=‘http://www.sogou.com’>搜狗</a>";
		}
	document.getElementById("demo").innerHTML=x.innerHTML;
	}
	
	/*function F()																//switch  基于不同的条件来执行不同的动作
	{
	var x="";
	var day=new Date().getDay();	//不是Days,记得前面有个new
	switch (day)		//括号内就是变量
		{			//请注意 Sunday=0, Monday=1, Tuesday=2, 等等：
		case 0:		//记得冒号
			x="Today is Sunday.";	
			break;
		case 1:
			x="Today is Monday.";
			break;
		case 2:
			x="Today is Tuesday.";
			break;
		case 3:
			x="Today is Wednesday.";
			break;
		case 4:
			x="Today is Tursday.";
			break;
		case 5:
			x="Today is Friday.";
			break;
		case 6:
			x="Today is Saturday.";
			break;
		}
	document.getElementById("demo").innerHTML=x;
	}
	
	/*var x;																	//default 来规定匹配不存在时做的事情,与switch搭配使用：
	var day=new Date().getDay();
	switch (day)
	{
	case 0:
		x="Today is Sunday.";
		break;
	case 6:
		x="Today is Saturday.";
		break;
	default:
		x="今天并不是周六日！";
	document.getElementById("demo").innerHTML=x;
	}
	
	/*var cars=["BMW","Saab","Volvo","Ford"];									//	数组  有三种书写格式
		//var cars=new Array("BMW","Saab","Volvo","Ford");
			//var cars=new Array();				//说白了，new Array()可以看做是[]
			cars[0]="BMW";
			cars[1]="Saab";			
			cars[2]="Volvo";
			cars[3]="Ford";			//三者均所呈现的，是以逗号隔开排成一行
	document.getElementById('demo').innerHTML=cars;

	/*var cars=["BMW","Saab","Volvo","Ford"];									//  for循环语句   让数组排成多列
	for (var i=0;i<cars.length;i++)
	{
	document.write("< br>" + cars[i]);
	}
	
	/*var x="";		//写成var x;时，会出现undefined,剩下的将正常
	for (var i=10;i>2;i=i-3)		//每次代码块已被执行后增加一个值 (i++)，开头i=10，以3递减直到满足i>2的最小数。注意：不能直接写成i-3,只有递减为1时才可简写成i--
	{
	x=x+"The number is " + i + '<br>';	 //等号后面必须有一个x,否则将只出现最后一条数组数值
	}
	document.getElementById("demo").innerHTML=x;
	
	/*var x="",i=2;																//while 循环语句
	while (i<7)		//先给i一个初始值.只要是数组，都写成var x=“”；不可写成var x;
	{
	x=x + "The number is " + i + "<br>";
	i++;		//以1递增(不写的话容易崩溃的)
	}
	document.getElementById("demo").innerHTML=x;
	
	/*cars=["BMW","Volvo","Saab","Ford"];
	var i=0;
	while (cars[i])
	{
	document.write("<br>" + cars[i]);
	i++;
	}
	
	/*var x="",i=0;																//do...while 循环语句
	do 		//不是do()
	{
	x=x + "The number is " + i + "<br>";
	i++;
	}
	while (i<5)
	document.getElementById("demo").innerHTML=x;
	
	/*var x="";																	//循环语句中的break语句
	for (i=2;i<10;i++)
	{
	if (i==6) {break;}		//记得是==，写=的话会崩溃。对于break大括号可有可无
	x=x + "The number is " +i+ "<br>";		//The number is 2~5
	}
	document.write(x);
	
	/*var x="";																	//循环语句中的break语句
	for (i=0;i<10;i++)
	{
	if (i==3)		//记得是==，写=的话会崩溃
		{
		continue;		//对于continue大括号必须有
		}
	x=x + "The number is " +i+ "<br>";		//跳过The nunber is 3,即0~2,4~9
	}
	document.getElementById("demo").innerHTML=x;
	
	/*var txt="";  //当try代码块发生错误时，执行catch语句的代码块(二者成对出现)。 	 		//try..catch(err)语句
	 function F5()		//可以设置按钮也可以不用设置
	{
	try
		{
		 allert("Hello World!");	 
		 }
	catch (err)
		{
		txt="报错！ \n\n";
		txt+="出现的错误：" + err.message + "\n\n";
		txt+="点击确定继续。"
		alert(txt);
		}
	 }
	
	/*function F6()																	//throw语句
	{
	try{
	var x=document.getElementById("i1").value;
		if(x=="")		throw	"值为空";
		if(x<5)			throw	"值太小";
		if(x>10)		throw	"值太大";
		if(isNaN(x))	throw	"不是数字";
		}	
	catch(err){
		var y=document.getElementById("demo");
		y.innerHTML="错误：" + err + "。";
		}	
	}
	
	/*function F7()					//必填（或必选）项目								//表单验证
	{
	var x=document.forms["myform"]["fname"].value;	
	if (x=null || x=="")
		{
		alert("姓氏必填");
		return false;		//返回当前发生错误的页面，而不是跳转到其他页面
		}
	}
	
	/*function F7()				//Email验证											//表单验证
	{
	var x=document.forms["myform"]["fname"].value;	
	var atpos=x.indexOf("@");		//indexOf()：返回字符串中特定字符第一次出现的位置
	var dotpos=x.lastIndexOf(".");	//lastIndexOf():回字符串中特定字符最后一次出现的位置
	if(atpos==1 || atpos+2>dotpos || dotpos+2>=x.length )	//例如：@xxxxx.xxx或 xxxx@x.xxx 或xxxx.xx
		{
		alert("请输入正确的邮箱");
		return false;
		}
	}
	
	/*function F8()						//search() 方法搜索字符串								//正则表达式
	{
	var x=document.getElementById("p8").innerHTML;		//就是那个句子
	y=x.search(/不怕aAAa/i);					//搜索内容不加引号，不区分大小写）
	document.getElementById("demo").innerHTML=y;
	}
	
	/*function F9()
	{
	var x=document.getElementById("p8").innerHTML;
	var y=x.replace(/天下/i,"<font color=#FF0000>世界</font>");
	document.getElementById("p8").innerHTML=y;
	}
	
	/*document.write		//格式： / X /.test() 或 new RegExp(" X ").test()						//正则表达式			
	(
	  /e/.test("Have a nice day!")   //X 是要查找的字符串，有为true
	);
	
*/			//格式：var text=‘{  ”数组名称“ ：[{"对象":"属性"},{"对象":"属性"}]   }’																				//JSON 字符串转换成对象
	var text='{"employees":[{"name":"John","age":"20"},{"name":"Anna","age":"30"},{"name":"Jack","age":"40"}]}';
	obj=JSON.parse(text);
	document.getElementById("demo").innerHTML=
	obj.employees[1].name + " " + obj.employees[0].age + " " + obj.employees[2].name;
</script>
	
	
</p>
</body>
</html>
